In Svelte, named slots allow you to pass multiple pieces of content into different areas of a child component. Each named slot has a unique name attribute, making it easier to build complex and reusable layouts.
To create a named slot, add a name attribute to the <slot> element in the child component.
When using the component, wrap the content in a <div slot="name"> or any HTML element with a slot attribute that matches the slot name.
You can add fallback content inside each named slot. This content will appear only if the parent does not provide content for that slot.
Use
slot="name"in the parent to target a specific named slot in the child.If a slot has no
name, it becomes the default slot.Fallback content inside a slot is displayed only when the parent provides nothing.
You can combine named slots with a default slot for flexible component structures.